<template>
	<view>
		<view class="cell">
			<view class="cell_text">学校</view>
			<input style="width: 550rpx;" type="number" v-model="gongsimingcheng" placeholder="请输入学校" />
		</view>
		<view class="cell">
			<view class="cell_text">学位</view>
			<input style="width: 550rpx;" type="number" v-model="zhiweimingcheng" placeholder="请输入学位" />
		</view>
		<view class="cell">
			<view class="cell_text">开始时间</view>
			<view style="width: 300rpx;justify-content: space-between;" @tap="setDate('ruzhishijian')">
				<text>{{ruzhishijian?dayjs(ruzhishijian).format('YYYY-MM-DD'):'请选择'}}</text>
				<image style="width: 50rpx;height: 100%;" src="/static/img/yjt80.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="cell">
			<view class="cell_text">截止时间</view>
			<view style="width: 300rpx;justify-content: space-between;" @tap="setDate('lizhishijian')">
				<text>{{lizhishijian?dayjs(lizhishijian).format('YYYY-MM-DD'):'请选择'}}</text>
				<image style="width: 50rpx;height: 100%;" src="/static/img/yjt80.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="submit" v-if="id!=''">
			<view class="submit1" @click="DeleteWork">
				<view>删除</view>
			</view>
			<view class="submit2" @click="SaveWork">
				<view>保存</view>
			</view>
		</view>
		<view v-else class="submit" @click="SaveWork">
			<view>保存</view>
		</view>
		<up-datetime-picker ref="datetimePickerRef" :title="title" :show="show" mode="date" :formatter="formatter" :minDate="315504000000"
			@cancel="show=false" @confirm="getDate"></up-datetime-picker>

	</view>

</template>

<script>
	import {
		userInfoSave,
		serverDetailApi,
		expedit
	} from '@/api/service.js'
	import {
		getUserInfoApi,
	} from '@/api/user.js'
	import baseURL from "@/config/config.js"
	import {
		Upload
	} from "@/utils/upload.js"
	import dayjs from "dayjs"
	import {
		onLoad,
		onUnload,
		onReady
	} from "@dcloudio/uni-app"
	import {
		reactive,
		toRefs,
		ref,
		watch,
		computed,
		onMounted,
	} from "vue"
	import {
		useStore
	} from '@/store/index.js'

	export default {
		setup() {
			const store = useStore()
			const datetimePickerRef = ref(null);
			const state = reactive({
				userInfo: computed(() => store.userInfo),
				gongsimingcheng: "",
				zhiweimingcheng: "",
				ruzhishijian: "",
				ruzhishijianCopy: "",
				lizhishijian: "",
				lizhishijianCopy: "",
				minDate: '-28800',
				maxDate: new Date().getTime(),
				show: false,
				show1: false,
				formatter(type, value) {
					if (type === 'year') {
						return `${value}年`;
					}
					if (type === 'month') {
						return `${value}月`;
					}
					return value;
				},
				date: "",
				date1: "",
				id: "",
				title:"",
			})
			onLoad((options) => {
				if (options!=undefined && options.id) {
					state.gongsimingcheng = options.name;
					state.zhiweimingcheng = options.work;
					state.ruzhishijian = options.dateStart;
					state.lizhishijian = options.dateOver;
					// state.content = options.content == "null" ? '' : options.content;
					state.id = options.id;
				}
			})


			onReady(() => {
				// 微信小程序需要用此写法
				datetimePickerRef.value.setFormatter(formatter);
			})

			const goBack = () => {
				uni.navigateBack(-1)
			}

			function SaveWork() {
				if(state.gongsimingcheng=='' || state.zhiweimingcheng=='' || state.ruzhishijian=='' || state.lizhishijian==''){
					uni.$u.toast('请填写完整信息');return;
				}
				if(state.ruzhishijian>state.lizhishijian){
					uni.$u.toast('截止时间不能小于开始时间');return;
				}
				
				var data = {
					name: state.gongsimingcheng,
					type: 0,
					dateStart: state.ruzhishijian,
					dateOver: state.lizhishijian,
					work: state.zhiweimingcheng,
				};
				if(state.id!='')
					data.id = state.id;
				expedit(data).then(res=>{
					console.log(res);
					if(res.code==200){
						uni.$u.toast('保存成功');
						uni.navigateBack();
					}
				});
				
			}
			function DeleteWork(){
				
			}
			const setDate = (type) => {
				state.dateType = type
				state.show = true
			}
			const getDate = (e) => {
				state.show = false

				const timeFormat = uni.$u.timeFormat;
				if (state.dateType === "ruzhishijian") {
					state.ruzhishijian = timeFormat(e.value, 'yyyy-mm-dd 00:00:00');
				} else {
					state.lizhishijian = timeFormat(e.value, 'yyyy-mm-dd  00:00:00');
				}
				state.dateType = ""

			}
			return {
				...toRefs(state),
				baseURL,
				goBack,
				SaveWork,
				setDate,
				getDate,
				dayjs,
				DeleteWork,
			}
		}

	}
</script>

<style>
	.cell {
		width: 100%;
		height: 100rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.cell>view {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-left: 40rpx;
	}

	.cell_text {
		font-size: 14px;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #333333;
	}

	.cell_text1 {
		font-size: 12px;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #333333;
	}

	.right {
		width: 20rpx;
		height: 20rpx;
		margin-right: 25rpx;
		margin-left: 10rpx;
	}

	.textarea {
		margin: 100px auto;
		width: 100%;
		text-align: center;
	}

	.textarea textarea {
		width: 400px;
		height: 300px;
	}

	.numLimit {
		position: relative;
		top: -10px;
		left: -90px;
	}


	.submit {
		width: 100%;
		height: 88rpx;
		background-color: #298FCD;
		position: fixed;
		bottom: 0;
		display: flex;
	}

	.submit>view {
		font-size: 15px;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		margin: auto;
	}

	.submit1 {
		width: 50%;
		height: 88rpx;
		background-color: #F7F7F7;
		display: flex;
	}

	.submit1>view {
		margin: auto;
		color: #298FCD;
	}

	.submit2 {
		width: 50%;
		height: 88rpx;
		background-color: #298FCD;
		display: flex;
	}

	.submit2>view {
		margin: auto;
		color: white;
	}
</style>